<template>
	<view>
		<view class="Dahe">
			<view class="tiMu"><span class='qiAn'>{{list[findindex].leiXin}}</span>{{list[findindex].Timu}}</view>
			<button :class="index==sixindex?'is':''" v-for="(item,index) in list[findindex].xIangone"
				@click="tiaozhuan(index)">{{item}}</button>
			<view class="biaoQian">{{findindex+1}}/{{list.length}}</view>
			<view class="wuJiao">
				<!-- {{scList[findindex].flage}} -->
				<view class="leftone">
					<img class='imgae' @click='onsrTir(list[findindex],findindex)'
						:src='(scList[findindex].flage===true)?srcdata.datasrc:srcdata.src' />
						
				</view>
				<view class="rigthone">
					
					<button v-if="findindex+1<list.length" class="btnBox" type="primary"
						@click="xiaYiti(list[findindex])">下一题</button>
					<button v-else class="btnBox" type="primary" @click="tjda(list[findindex])">提交答题</button>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				//这是收藏
				srcdata: {
					src: '../../static/image/收藏.png',
					datasrc: '../../static/image/加星收藏_填充.png'
				},
				//这是判定收藏的布尔值
				// ifage: false,
				//这个是判断背景颜色的最初下标
				sixindex: -1,
				list: [],
				list1:[],
				//这个是当前的下标
				findindex: 0,
				daAn: [],
				//这个正确答案的数组
				arris: [],
				//这个是错误答案的数组
				arreoor: [],
				//这是定时器
				timer: null,
				miaoshu: 0,
				// ides:-1,
				
			};
		},
		onLoad(option) {
			// console.log('这是传输过来的值', option)
			uni.setNavigationBarTitle({
				title: option.name
			})

		},
		mounted() {
			this.getlist()
			//定义一个定时器
			// this.timer=setInterval(()=>{
			//  this.miaoshu++
			//  console.log('定时器',this.miaoshu)
			// },1000)

		},
		methods: {
			...mapMutations('school', ['upirteFunfid','sc','sj']),
			...mapMutations('users', ['addCarts', 'cjhz']),
			getlist() {
				// console.log('tttt')
				uni.$http.get('/64647ed15bbac3001ab9f3a7/example/Timu').then((res) => {
					// console.log('qingqiu ', res)
					this.list = res.data.data.list
					// this.list.forEach((goods) => {
					// 	goods.flage=false
					// })
					// uni.setStorageSync('scsj', JSON.stringify(this.list))
					// console.log(this.list)
					
					// console.log('储存上去', this.list)
					// console.log('这是list的长度', this.list.length)
				})

			},
			//收藏的方法
			onsrTir(timu,index) {
				this.getlist()
				this.list.forEach((goods) => {
					goods.flage=false
				})
				var obj={
					xiabiao:index,
					list:this.list
				}
				// console.log('asjkbnsakldjksand',obj)
				// uni.setStorageSync('scsj', JSON.stringify(this.list))
				// console.log('index',this.list[index])
				// console.log('aaa')
				this.sc(obj)
				// this.list[index].flage=!this.list[index].flage
				// timu.ifage=this.list[index].ifag
				// console.log(timu)
				// //找到当前下标的题目
				// console.log(timu)
				// if (this.ifage == true) {
				// 	this.shoucangArr = [...this.shoucangArr, timu]
				// 	console.log('这是准备存入本地存储的', this.shoucangArr)
				// } else {
				// 	this.shoucangArr.splice(this.shoucangArr.length - 1, 1)
				// 	console.log('点击取消', this.shoucangArr)
				// }
				// //存入本地
				// uni.setStorageSync('shouCang', this.shoucangArr);
			},
			// 下一题
			xiaYiti(a) {
				// console.log('96666', a)
				// console.log(this.list.Timu)
				// console.log(typeof this.ides)
				console.log('共享过来的', this.list)

				// console.log('共享过来的', this.acd)
				//console.log('这是寻找的下标',add)
				if (this.sixindex === -1) {
					uni.showModal({
						title: '提示',
						content: '请选择答案',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
					return
				} else {
					//这个是改变类名
					this.sixindex = -1
					//这个是取到了总数据里面当前下标的选择数据
					var sonbox = this.list[this.findindex].zhengque
					//if是正确数组  else是错误数组
					if (this.ides === sonbox) {
						//console.log('这是重新添加的数组')
						this.arris = [...this.arris, a]
						console.log('正确答案', this.arris)
						console.log('2')
					} else {
						// console.log('我输入的肥肉',this.ides)
						var idess = "xuanze"
						a[idess] = this.ides
						console.log('1')
						// console.log('123',a)
						this.addCarts(a)

					}
					// console.log('这是新添加的数组', this.findindex)
					this.zhengTin()
				}
				console.log('ggfjj', this.findindex)
				console.log('qqfqq', this.list.length)

			},
			//这个是判定下标有无达到最后一题的方法
			zhengTin() {
				console.log(this.findindex)
				if (this.findindex + 1 < this.list.length) {
					this.findindex++
					//this.ides=null
				} else {
					//定义一个布尔值值用来控制组件的显示隐藏
					// console.log('没有题目咯')
				}
			},
			tiaozhuan(index) {
				console.log('下标', index)
				console.log('下标数据', this.list[this.findindex].xIangone[index])
				//这个是选择的选项
				// var opict = this.list[this.findindex].xIangone[index]
				var opict = this.list[this.findindex].xIangone[index]
				this.sixindex = index
				this.upirteFunfid(opict)
			},
			tjda(qqb) {

				this.xiaYiti(qqb)
				console.log('111')
				var _this = this;
				let yy = new Date().getFullYear();
				let mm = new Date().getMonth() + 1;
				let dd = new Date().getDate();
				let hh = new Date().getHours();
				let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
				let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
				_this.gettime = yy + '/' + mm + '/' + dd + ' ' + hh + ':' + mf + ':' + ss;
				console.log(_this.gettime)
				var obj = {}
				obj.num = this.arris.length
				obj.zcd = this.list.length
				obj.Timer = _this.gettime
				this.cjhz(obj)
				uni.navigateTo({
					url: "/subpkg/zjlxcj/zjlxcj"
				})
			}
		},
		computed: {
			...mapState('school', ['ides','scList'])
		}
	}
</script>

<style lang="scss">
	.imgae {
		margin-top: 8px;
		width: 30px;
		height: 30px;
	}

	.isfre {
		background-color: yellow;
	}

	.qiAn {
		background-color: rgb(254, 232, 212);
		color: rgb(226, 169, 119);
		margin-left: 10px;
		margin-right: 10px;
	}

	button {
		width: 80%;
		margin-top: 30px;
		font-size: 14px;
	}

	.biaoQian {
		background-color: rgb(243, 243, 243);
		color: rgb(126, 126, 126);
		width: 70px;
		height: 20px;
		text-align: center;
		position: fixed;
		bottom: 10%;
		left: 300px;
	}

	.wuJiao {
		display: flex;
		width: 100%;
		border: 1px solid gray;
		background-color: whitesmoke;
		position: fixed;
		bottom: 0;
		height: 50px;
	}

	.leftone {
		width: 10%;
	}

	.rigthone {
		width: 80%;
	}

	.btnBox {
		margin-top: 6px;
		width: 330px;
	}

	.is {
		background-color: aqua;
	}
</style>